<div class="box-container">
    <div class="right-panel">
        <div class="content-top-bar">
            <div class="search-box">
                <div style="margin-left: 10px">
                    日期：
                    <nz-date-picker [(ngModel)]="today" (ngModelChange)="getGridData()"></nz-date-picker>
                </div>
                <div class="table-btn-group">
                    <button nz-button nzType="primary" *ngIf="!isTableEditable" (click)="startEdit()">填报</button>
                    <div *ngIf="isTableEditable">
                        <button class="bottom-bar-btn" nz-button nzType="primary" (click)="saveEditData()">保存</button>
                        <button class="bottom-bar-btn"
                                nz-button
                                nzType="default"
                                nz-popconfirm
                                nzPopconfirmTitle="确定重置?"
                                (nzOnConfirm)="resetEditData()">
                            重置
                        </button>
                        <button class="bottom-bar-btn"
                                nz-button
                                nzType="default"
                                nz-popconfirm
                                nzPopconfirmTitle="确定取消?"
                                (nzOnConfirm)="cancelEdit()">
                            取消
                        </button>
                    </div>
                </div>
            </div>

            <div class="right-ctrl-box">
                <div style="margin-right: 20px">(灌溉面积： 亩)</div>
            </div>
        </div>
        <div class="main-content">
            <nz-table #detailTable
                      [nzData]="detailData"
                      [nzTitle]="tableTitle"
                      nzBordered
                      [nzFrontPagination]="false"
                      [nzShowPagination]="false"
                      [nzWidthConfig]="widthConfig"
                      nzSize="middle">
                <thead>
                <tr>
                    <th rowspan="2">名称</th>
                    <th colspan="2">小麦</th>
                    <th colspan="2">水稻</th>
                    <th colspan="2">玉米</th>
                    <th colspan="2">其它</th>
                </tr>
                <tr>
                    <th>累计</th>
                    <th>今日</th>
                    <th>累计</th>
                    <th>今日</th>
                    <th>累计</th>
                    <th>今日</th>
                    <th>累计</th>
                    <th>今日</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let data of detailTable.data" class="editable-row">
                    <td>{{ data.name }}</td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else wheatTotalInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.wheatTotal }}
                            </div>
                        </div>
                        <ng-template #wheatTotalInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.wheatTotal">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else wheatInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.wheatDay }}
                            </div>
                        </div>
                        <ng-template #wheatInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.wheatDay">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else riceTotalInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.riceTotal }}
                            </div>
                        </div>
                        <ng-template #riceTotalInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.riceTotal">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else riceInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.riceDay }}
                            </div>
                        </div>
                        <ng-template #riceInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.riceDay">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else cornTotalInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.cornTotal }}
                            </div>
                        </div>
                        <ng-template #cornTotalInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.cornTotal">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else cornInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.cornDay }}
                            </div>
                        </div>
                        <ng-template #cornInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.cornDay">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else otherTotalTotalInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.otherTotalTotal }}
                            </div>
                        </div>
                        <ng-template #otherTotalTotalInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.otherTotalTotal">
                            </label>
                        </ng-template>
                    </td>
                    <td>
                        <div class="editable-cell" *ngIf="!isTableEditable || !isRowEditable(data); else otherTotalInputTpl">
                            <div class="editable-cell-value-wrap">
                                {{ data.otherTotalDay }}
                            </div>
                        </div>
                        <ng-template #otherTotalInputTpl>
                            <label>
                                <input nz-input type="number" [(ngModel)]="editCache[data.id].data.otherTotalDay">
                            </label>
                        </ng-template>
                    </td>
                </tr>
                </tbody>
            </nz-table>

        </div>
    </div>
</div>
